var app = new Vue({
  el: "#app",
  data: {
    loading: {
      cardInfo: true,
      friendList: true,
      industryList: true,
    },
    cardInfo: null,
    friendList: [],
    industryList: [],
    showDialog: false,
    showDialogPermission: false,
    qrcode: null,
  },
  mounted() {
    this.getCardInfo();
    this.getFriendList();
    this.getIndustryList();
  },
  methods: {
    getCardInfo() {
      apiGetCardInfo()
        .then((res) => {
          this.loading.cardInfo = false;
          this.cardInfo = res.data;
        })
        .catch((err) => {
          this.$message.error((err && err.msg) || err);
        });
    },
    getFriendList() {
      apiGetFriendList()
        .then((res) => {
          this.loading.friendList = false;
          this.friendList = res.data;
        })
        .catch((err) => {
          this.$message.error((err && err.msg) || err);
        });
    },
    getIndustryList() {
      apiGetIndustryList()
        .then((res) => {
          this.loading.industryList = false;
          if (res.data) {
            res.data.forEach((item) => {
              item.is_add = false;
              item.is_loading = false;
            });
            this.industryList = res.data;
          }
        })
        .catch((err) => {
          this.$message.error((err && err.msg) || err);
        });
    },
    onShowDialog() {
      if (parseInt(this.cardInfo.permission) === 1) {
        console.log(11);
        this.showDialog = true;
        if (this.qrcode) {
          return;
        }
        this.$nextTick(() => {
          this.createQRCode();
        });
      } else {
        console.log(1221);
        this.showDialogPermission = true;
      }
    },
    onEdit() {
      if (parseInt(this.cardInfo.permission) === 1) {
        window.open("https://user.feijiu.net/CustomerInfo_Update.aspx");
      } else {
        this.showDialogPermission = true;
      }
    },
    createQRCode() {
      this.qrcode = new QRCode(document.getElementById("qrcode"), {
        // text: `https://m.feijiu.net/vcard/${this.cardInfo.id}.html`,
        text: "http://10.10.9.142:5501/businessCard-m/",
        width: 300, // 宽度(百分比 no)
        height: 300, // 高度(百分比 no)
        colorDark: "#333333", // 生成的二维码的深色部分
        colorLight: "#ffffff", // 生成二维码的浅色部分
        background: "#ffffff", // 背景颜色
        foreground: "#333333", // 前景颜色
        margin: 0, // 先将库的 margin 设为 0
      });

      // 获取生成的 canvas 元素
      const canvas = document.getElementById("qrcode").querySelector("canvas");
      if (canvas) {
        const margin = 20; // 自定义边距值
        const textHeight = 40; // 文本高度
        const originalWidth = canvas.width;
        const originalHeight = canvas.height;

        // 创建一个新的 canvas 并设置边距
        const newCanvas = document.createElement("canvas");
        newCanvas.width = originalWidth + 2 * margin;
        newCanvas.height = originalHeight + 2 * margin + textHeight;
        const ctx = newCanvas.getContext("2d");
        ctx.fillStyle = "#ffffff"; // 设置背景颜色
        ctx.fillRect(0, 0, newCanvas.width, newCanvas.height);
        ctx.drawImage(canvas, margin, margin);
        // 绘制文本
        ctx.font = "14px 微软雅黑"; // 设置字体样式和大小
        ctx.fillStyle = "#606266"; // 设置文本颜色
        ctx.textAlign = "center"; // 设置文本对齐方式.
        ctx.fillText(
          `${this.cardInfo.name} ${this.cardInfo.position} 电子名片`,
          newCanvas.width / 2,
          newCanvas.height - margin
        );

        // 替换原来的 canvas
        const qrcodeContainer = document.getElementById("qrcode");
        qrcodeContainer.innerHTML = "";
        qrcodeContainer.appendChild(newCanvas);
      }
    },
    onDownload() {
      let canvas = document.getElementById("qrcode").querySelector("canvas");
      let img = canvas.toDataURL("image/png");
      let a = document.createElement("a");
      a.download = `${this.cardInfo.name}-${this.cardInfo.position}-电子名片.png`;
      a.href = img;
      a.click();
    },
    onAddFriend(item) {
      if (item.is_loading) {
        return;
      }
      item.is_loading = true;
      apiAddFriend({ id: item.id })
        .then((res) => {
          this.$message.success("添加成功");
          item.is_add = true;
          item.is_loading = false;
        })
        .catch((err) => {
          this.$message.error((err && err.msg) || err);
          item.is_loading = false;
        });
    },
  },
});
